<template>
    <div>
        <div class="app-container">
            <el-card class="operate-container" shadow="never">
                <i class="el-icon-tickets" style="margin-top: 5px"></i>
                <span style="margin-top: 5px">数据列表</span>
                <el-button
                        class="btn-add"
                        @click="handleAddProductCate()"
                        size="mini">
                    添加
                </el-button>
            </el-card>
            <div class="table-container">
                <el-table ref="productCateTable"
                          style="width: 100%"
                          :data="list"
                          v-loading="listLoading" border>
                    <el-table-column label="编号" width="100" align="center" prop="id">
                        <template slot-scope="scope">{{scope.row.id}}</template>
                    </el-table-column>
                    <el-table-column label="规格编号" width="100" align="center" prop="specId">
                        <template slot-scope="scope">{{scope.row.specId}}</template>
                    </el-table-column>
                    <el-table-column label="规格名称" align="center" prop="name">
                        <template slot-scope="scope">{{scope.row.name}}</template>
                    </el-table-column>
                    <el-table-column label="设置" width="200" align="center" prop="specId">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleShowNextLevel(scope.row.specId)">查看规格选项
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center" prop="specId">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleUpdate(scope.row.specId)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.row.specId)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-container">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="pageSize"
                        :page-sizes="[5,10,15]"
                        :current-page.sync="pageNum"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <div class="topin"></div>
    </div>
</template>

<script>
    export default {
        name: "ProductSpecificationLsit",
        data(){
            return {
                list:[],
                listLoading: true,
                pageNum:1,
                pageSize:5,
                total:null,
            }
        },
        created(){
          this.getSpecList();
        },
        methods:{
            getSpecList(){
                this.listLoading = true;
                this.list = [];
                this.service.get("/product/manage/proSpecification/search.do",{
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                }).then(res=>{
                    if (res.data.status == 0){
                        this.listLoading = false;
                        this.total = res.data.data.total;
                        for (let i = 0;i<res.data.data.list.length;i++){
                            let spec={
                                id:'',
                                specId:'',
                                name:'',
                            };
                            spec.id =i+1;
                            spec.specId = res.data.data.list[i].id;
                            spec.name = res.data.data.list[i].specName;

                            this.list.push(spec);
                        }
                    }
                })
            },
            handleAddProductCate() {
                this.$router.push({name:'添加商品规格'});
            },
            handleUpdate(specId) {
                this.$router.push({
                    name:'修改商品规格',
                    params:{
                        specId:specId
                    }
                });
            },
            //删除类别信息
            handleDelete(specId) {
                this.$confirm('是否要删除该品牌', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.service.get("/product/manage/proSpecification/delete.do",{params:{id:specId}}).then(response => {
                        if (response.data.status==0){
                            this.$message({
                                message: '删除成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.getSpecList();
                        }else{
                            this.$message.error('删除失败');
                        }
                        this.getSpecList();
                        /*
                        this.$router.push({name:'商品分类'})*/
                    });
                });
            },
            handleSizeChange(val) {
                this.pageNum = 1;
                this.pageSize = val;
                this.getBrandList();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getBrandList();
            },
            handleShowNextLevel(specId){
                this.$router.push({name: '商品规格选项', params: {specId: specId}})
            },

        }
    }
</script>

<style scoped>
    .el-pagination{
        float: right;
    }
    .batch-operate-container{
        float: left;

    }
    .topin{
        height:25px
    }
</style>